<template>
    <Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
        <template #container>
            <BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
                <template #address="{ record, column, index }">
                    <span v-if="record['address']">{{ record?.address }}</span>
                    <span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
                </template>
            </BasicTable>
        </template>
    </Dialog>
</template>
<script setup lang="ts">
    import { computed, ref, watch, h } from 'vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { useDialog } from '/@/views/components/dialogHooks.ts';
    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
    import { getMonitorList } from '/@/components/body-d-right/right.api.ts';

    const props = defineProps({
        record: Object,
        title: String,
        useForm: Boolean,
        labelCol: Object,
        wrapperCol: Object,
        setting: Object,
        phoneType: String,
    });

    const columns = [
        {
            title: '姓名',
            dataIndex: 'realName',
            key: 'realName',
        },
        {
            title: '二级单位',
            dataIndex: 'orgName2',
            key: 'orgName2',
        },
        {
            title: '联系电话',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '异常事件',
            dataIndex: 'eventType_dictText',
            key: 'eventType_dictText',
        },
        {
            title: '异常值',
            dataIndex: 'dataValue',
            key: 'dataValue',
        },
        {
            title: '发生时间',
            dataIndex: 'warnTime',
            key: 'warnTime',
        },
        {
            title: '发生地点',
            dataIndex: 'address',
            key: 'address',
            slot: 'address',
            // customRender: ({ record }) => {
            //     if (record?.address) {
            //         return record?.address;
            //     } else {
            //         return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
            //     }
            // },
        },
    ];
    const formState = computed(() => ({
        dataType: props.setting.dataType,
        orgCode: props.setting?.orgCode,
    }));
    const { visible, closeDialog, openDialog } = useDialog({ title: props.title });
    const registerTable = ref();
    watch(props, () => {
        registerTable.value?.getRecords();
    });
    defineExpose({
        openDialog,
    });
</script>
<style scoped lang="less">
    .table-container {
        margin: 0 10px;
    }
</style>
